﻿@model Aidbrella.Web.Models.CreateProjectViewModel
<h2>Select a location for your project</h2>
<div id="project-sites-map">
</div>

<script type="text/javascript">
	$(window).load(function () {
		var map = GetMap(document.getElementById("project-sites-map"), 
		{
			zoom: 3,
			showScalebar: false,
			showDashboard: false,
		});
 
		var infoBox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), {visible: false});
		map.entities.push(infoBox);

		var loc = new Microsoft.Maps.Location(0, 0);
		var pin = new Microsoft.Maps.Pushpin(loc);
		pin.setOptions({ visible: false });

		map.entities.push(pin);

		Microsoft.Maps.Events.addHandler(map, 'click', function (e) {
			var point = new Microsoft.Maps.Point(e.getX(), e.getY());
			var loc = e.target.tryPixelToLocation(point);
			pin.setLocation(loc);
			pin.setOptions({ visible: true });

			infoBox.setLocation(loc);
			infoBox.setOptions({ title: "New location", visible: true });

			var url = "http://dev.virtualearth.net/REST/v1/Locations/" + loc.latitude + "," + loc.longitude + '?key=An1MYIpSMoAwXq41CJjbsnwEPSg-cg9mqgox4xed3ObUw3RYu0BhsdQYQIMOKLOh&jsonp=?';
			$.getJSON(url, function (result) { 
				var address = result.resourceSets[0].resources[0].address;
				infoBox.setOptions({title: address.countryRegion});
			});
		});
	});
</script>
